---
import cfg from "blog.config";
import MenuItem from "./Item/Item.astro";
import ListMenuItem from "./Item/ListItem.astro";
import ThemeSwitch from "./ThemeSwitch.astro";
import ItemList from "./_constant/ItemList";
import { MenuId } from "@/constant/Header";
---

<link
  rel="stylesheet"
  href={`${cfg.WebsiteSettings.base}/fonts/header/menu/iconfont.css`}
/>
<div class="menu" id={MenuId}>
  {
    ItemList.map(({ href, name, type, iconfont, data }) => {
      return !type || type === "normal" ? (
        <a href={cfg.WebsiteSettings.base! + href} class="h100 flex_center">
          <MenuItem ItemName={name} type={type} iconfont={iconfont} />
        </a>
      ) : (
        <ListMenuItem
          ItemName={name}
          type={type}
          iconfont={iconfont}
          data={data}
        />
      );
    })
  }
  <ThemeSwitch />
</div>

<style lang="scss">
  .menu {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1rem;

    .item {
      cursor: pointer;
    }

    .theme_switch {
      cursor: pointer;
      user-select: none;
    }
  }

  .menu_mobile {
    position: absolute;
    display: none;
  }

  @media screen and (max-width: 992px) {
    .menu {
      position: absolute;
      display: none;
    }
  }
</style>
